<!-- 客户 -->
<template>
    <div>
        <el-table
            ref="customerTable"
            :data="tableData"
            stripe
            border
            style="width: 100%"
            @selection-change="getSelectVal"
            @cell-dblclick="cellDblclick"
        >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
                type="index"
                lael="序号"
                width="55"
                align="center"
            />

            <el-table-column prop="name" label="姓名">
                <template slot-scope="scope">{{
                    scope.row.name || "--"
                }}</template>
            </el-table-column>
            <el-table-column prop="contactsCode" label="联系人编码"
                ><template slot-scope="scope">{{
                    scope.row.contactsCode || "--"
                }}</template></el-table-column
            >
            <el-table-column prop="position" label="职务"
                ><template slot-scope="scope">{{
                    scope.row.position || "--"
                }}</template></el-table-column
            >
            <el-table-column prop="sex" label="性别">
                <template slot-scope="scope">
                    <span v-if="scope.row.sex === '1'">男</span>
                    <span v-if="scope.row.sex === '2'">女</span>
                    <span v-else>未知</span>
                </template>
            </el-table-column>
            <el-table-column prop="supplierId" label="供应商"
                ><template slot-scope="scope">{{
                    scope.row.supplierId || "--"
                }}</template></el-table-column
            >
            <el-table-column prop="workTel" label="固定电话"
                ><template slot-scope="scope">{{
                    scope.row.workTel || "--"
                }}</template></el-table-column
            >
            <el-table-column prop="mobile" label="移动电话"
                ><template slot-scope="scope">{{
                    scope.row.mobile || "--"
                }}</template></el-table-column
            >
            <el-table-column prop="fax" label="传真"
                ><template slot-scope="scope">{{
                    scope.row.fax || "--"
                }}</template></el-table-column
            >
            <el-table-column prop="email" label="邮件地址"
                ><template slot-scope="scope">{{
                    scope.row.email || "--"
                }}</template></el-table-column
            >
            <el-table-column prop="belongCompany" label="所属公司"
                ><template slot-scope="scope">{{
                    scope.row.belongCompany || "--"
                }}</template></el-table-column
            >
            <el-table-column prop="addressName" label="地点名称"
                ><template slot-scope="scope">{{
                    scope.row.addressName || "--"
                }}</template></el-table-column
            >
            <el-table-column prop="address" label="详细地址"
                ><template slot-scope="scope">{{
                    scope.row.address || "--"
                }}</template></el-table-column
            >
            <el-table-column prop="userId" label="创建人"
                ><template slot-scope="scope">{{
                    scope.row.userId || "--"
                }}</template></el-table-column
            >
            <el-table-column
                prop="isDefault"
                label="是否默认联系人"
                width="150"
            >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.isDefault" type="success"
                        >是</el-tag
                    >
                    <el-tag v-else-if="!scope.row.isDefault" type="danger"
                        >否</el-tag
                    >
                    <span v-else>--</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pagination mt10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
        >
        </el-pagination>
    </div>
</template>

<script>
import { getSupplyContact } from "@/api/base/data";
export default {
    data() {
        return {
            tableData: [],
            page: 1, //当前页
            limit: 10, //每页条数
            total: 0,
        };
    },
    methods: {
        //分页器size
        handleSizeChange(val) {
            this.limit = val;
            this.getDataList();
        },
        //分页器当前页
        handleCurrentChange(val) {
            this.page = val;
            this.getDataList();
        },
        getSelectVal(val, isDbleclick) {
            this.$emit("getSelectVal", val, isDbleclick);
        },
        getDataList() {
            let params = {
                limit: this.limit,
                page: this.page,
            };
            getSupplyContact(params).then((res) => {
                this.loading = false;
                this.tableData = res.data.records;
                this.total = res.data.total;
            });
        },
        cellDblclick(value) {
            let selectItem = [];
            selectItem.push(value);
            this.getSelectVal(selectItem, true);
        },
    },
    mounted() {
        this.getDataList();
    },
};
</script>

<style></style>
